<template>
  <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
  >请输入需要更改权限角色的id</span
  >
  <el-input v-model="roleId" placeholder="请输入需要更改权限角色的id"  id="txtCon"/>
  <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
      size="large"
  >全选</el-checkbox
  >
  <el-checkbox-group
      v-model="checkedPermission"
      @change="handleCheckedCitiesChange"
      :disabled="flag"
  >
    <el-checkbox size="large" v-for="permission in permissions " :key="permission" :label="permission.name">{{
        permission.name
      }}</el-checkbox>
  </el-checkbox-group>
  <el-form-item>
    <el-button type="primary" @click="onQuery">查询</el-button>
    <el-button type="primary" @click="onSubmit">授权</el-button>
  </el-form-item>
</template>

<script>
import {onMounted, ref} from 'vue'
import {addPermission, findMyPermission, mypermissions} from "../../api/permission";
import {loadAll} from "@/api/dept";
import {ElMessage} from "element-plus";
export default {
	name: 'role',
	setup() {
    const flag = ref(false)
    const onSubmit = () => {
      console.log(checkedPermission.value)
      permissionsId.value = []
      for (let i = 0; i < permissions.value.length; i++) {
        for (let j = 0; j < checkedPermission.value.length; j++) {
          if(permissions.value[i].name === checkedPermission.value[j]){
            permissionsId.value[mid.value] = permissions.value[i].id
            mid.value = mid.value +1
          }
        }
      }
      mid.value = 0
      addPermission({
        "roleId":roleId.value,
        "permissionIds":permissionsId.value
      }).then(res=>{
        if(res.success){
          ElMessage({
            type: 'success',
            message: '授权成功',
          })
        }else {
          ElMessage({
            type: 'error',
            message: '授权失败',
          })
        }
      })
    }
    const mid = ref(0);
    //由于没有登录，导致不能通过角色姓名查询角色的权限，所以定义一个死的角色roleid
    const roleId = ref();
    const checkAll = ref(false)
    const isIndeterminate = ref(true)
    const checkedPermission = ref([])
    const permissions = ref([])
    const permissionsName = ref([])
    const permissionsId = ref([])
    const handleCheckAllChange = (val) => {
      console.log("handleCheckAllChange"+val)
      checkedPermission.value = val ? permissionsName.value  : []
      isIndeterminate.value = false
    }
    const handleCheckedCitiesChange = (value) => {
      checkedPermission.value = value
    }
    const onQuery = ()=>{
      checkedPermission.value = []
      findMyPermission(roleId.value).then(res=>{
        console.log(res.data)
        permissionsId.value = res.data
        for (let i = 0; i < permissions.value.length; i++) {
          for (let j = 0; j < permissions.value.length; j++) {
            if(permissions.value[i].id === permissionsId.value[j]){
              checkedPermission.value[mid.value] = permissions.value[i].name
              mid.value = mid.value+1
            }
          }
        }
        mid.value = 0
      }).then(res=>{
      }).catch(res=>{
        console.log(res)
      })
    }
    onMounted(()=>{
      mypermissions().then(res=>{
        permissions.value = res.data
        for (let i = 0; i < permissions.value.length; i++) {
          permissionsName.value[i] = permissions.value[i].name
        }
      }).catch(res=>{
        console.log(res)
      })
    })
    return {
      checkAll,
      isIndeterminate,
      checkedPermission,
      permissions ,
      handleCheckedCitiesChange,
      handleCheckAllChange,
      roleId,
      onSubmit,
      permissionsName,
      permissionsId,
      mid,
      onQuery,
      flag
    }
	}
}
</script>
<style>
#txtCon{width:300px; height:40px;}
</style>
